<template>
	<view class="address_page">
		<view class="form">
			<view class="cell_item">
				<view class="label">联系人</view>
				<input v-model="form.name" class="input" placeholder-style="color: #DBDBDB" type="text"
					placeholder="请输入收货人项姓名">
			</view>
			<view class="cell_item">
				<view class="label">性别</view>
				<view class="tab">
					<view class="item" v-for="(item, index) in  tabs" :key="index">
						<view class="gender" @click="handelGender(index)">
							<image class="img"
								:src="index === count ? 'https://img.fy6b.com/2023/02/27/2099001d67a06.png' : 'https://img.fy6b.com/2023/02/24/d6dcf052fa0cc.png'">
							</image>
							<view class="text">{{ item }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell_item">
				<view class="label">手机号</view>
				<input type="text" placeholder-style="color: #DBDBDB" placeholder="请填写收货人手机号">
			</view>
			<view class="cell_item" @click="handelGoto">
				<view class="label aslab">收货地址</view>
				<input type="text" disabled placeholder-style="color: #DBDBDB" placeholder="请选择收货地址">
				<u-icon name="arrow-right" color="#999" size="18"></u-icon>
			</view>
			<view class="cell_item">
				<view class="label">门牌号</view>
				<input type="text" placeholder-style="color: #DBDBDB" placeholder="详细地址，如：A座8楼802">
			</view>
		</view>
		<view class="commit">保存</view>
	</view>
</template>

<script>
export default {

	data() {
		return {
			tabs: ['男', '女',],
			count: 0,
			form: {
				name: ''
			},
		};
	},
	methods: {
		handelGender(index) {
			this.count = index
		},
		handelGoto() {
			uni.navigateTo({
				url: '/pages/adderss/adderss'
			});
		}
	}
}
</script >

<style  lang="scss" scoped>
.address_page {
	height: 100vh;
	background-color: #F6F6F6;

	.form {
		background-color: #fff;

		.cell_item {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eeeeee;
			margin: 0 30rpx;

			.label {
				margin-right: 85rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.aslab {
				margin-right: 53rpx;
			}

			input {
				flex: 1;
			}

			::v-deep .input::-webkit-input-placeholder {
				font-size: 130rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: red;
			}
		}

		.tab {
			display: flex;
			align-items: center;
			margin-left: 28rpx;

			.item {
				.gender {
					display: flex;
					align-items: center;
					margin-right: 114rpx;

					.img {
						width: 40rpx;
						height: 40rpx;
					}

					.text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #222222;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.commit {
		position: absolute;
		bottom: 85rpx;
		left: 50%;
		margin-left: -345rpx;
		width: 690rpx;
		height: 78rpx;
		line-height: 78rpx;
		background: #DC483C;
		border-radius: 39rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-align: center;
		color: #FFFFFF;
	}
}
</style>